<template>
  <div class="aside_blogger_mes">
    <img :src="newUp.uAvatar" alt="" class="becomeHand" @click="toMine(newUp)" />
    <div class="aside_blogger_mes_name">
      <div>
        <p class="becomeHand"  @click="toMine(newUp)" >{{ newUp.nickname }}</p>
        <el-button v-if="followBtn == '关注'" @click="followUser(newUp.uId)"
          >关注</el-button
        >
        <el-dropdown v-else @command="handleCommand">
          <el-button :disabled="flag" @click="followUser(newUp.uId)">已关注</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="newUp.uId">取消关注</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <p class="becomeHand" @click="toDetails(newUp)">
        <span style="color: rgb(105, 104, 104);">刚刚投稿了&nbsp;</span
        >{{ newUp.titleName }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'], //注入依赖
  props: {
    newUp: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      isLoginUser: true,
      disabled: false,
      followBtn: '关注',
      loginUser: {},
      flag: false
    }
  },
  created () {
    this.getuserInfo()
  },
  methods: {
    toMine(userMes){
      console.log(userMes)
      userMes = JSON.stringify(userMes)
      this.$router.push({
          path: '/mine',
          query: {
            userMes
          } // 要传递的参数
        })
    },
    toDetails (item) {
      console.log(item)
      let params = item
      console.log(params)
      this.$axios.updatePostView(params).then((res) => {
        console.log(res)
        let detail = JSON.stringify(res.data)
        this.$router.push({
          path: '/details',
          query: {
            detail
          } // 要传递的参数
        })
      })
    },
    // 取消关注
    handleCommand (followedId) {
      let params = {}
      params.followedId = followedId
      params.fansNum = this.newUp.fansNum
      params.uId = this.loginUser.uId
      console.log(params)
      this.$axios.cancelFollow(params).then(res => {
        console.log(res)
        this.$message({
          message: '取消关注成功',
          type: 'success'
        })
        this.reload()
      })
    },
    // 查看当前文章的用户是否被当前登录的用户关注
    isFollow (followId, uId) {
      let params = {}
      params.followedId = followId
      params.uId = uId
      console.log(params)
      this.$axios.getFollow(params).then(res => {
        console.log(res)
        if (res.data != null) {
          this.followBtn = '已关注'
          this.disabled = true
        }
      })
    },
    // 关注用户
    followUser (uId) {
      // 关注用户
      let params = {}
      console.log(uId)
      if (this.cookies.getToken('X-Token') == null) {
        this.$message({
          message: '要先登录才可以关注哦！',
          type: 'warning'
        })
      } else {
        if (this.isLoginUser) {
          // alert("true")
          this.$message({
            message: '警告哦，用户不能关注自己',
            type: 'warning'
          })
        } else {
          // alert("false")
          if (this.followBtn == '关注') {
            this.flag = true
            // 点击关注按钮，被关注用户粉丝数+1，登录用户关注用户信息加1
            params.followedId = uId
            params.fansNum = this.newUp.fansNum
            params.uId = this.loginUser.uId
            console.log(params)
            this.$axios.updateFollow(params).then(res => {
              console.log(res)
              this.followBtn = '已关注'
              this.disabled = res.data.isFollow
              this.userMes.fansNum = res.data.fansNum
            })
            setTimeout(() => {
              this.flag = false
            }, 1000)
            this.reload()
          } else {
            this.$message({
              message:
                '若要取消关注，可点击下拉菜单中的“取消关注”，不要频繁点击哦',
              type: 'warning'
            })
          }
        }
      }
    },
    // 根据登录token实现关注
    getuserInfo () {
      let params = {}
      params.token = this.cookies.getToken('X-Token')
      // console.log(params.token!=null)
      if (params.token != null) {
        this.$axios.getUserInfo(params).then(res => {
          console.log(res.data.uId)
          this.loginUser = res.data
          this.isFollow(this.newUp.uId, res.data.uId)
          if (res.data.uId == this.newUp.uId) {
            // console.log("是登录用户")
            this.isLoginUser = true
          } else {
            // console.log("不是登录用户")
            this.isLoginUser = false
          }
        })
      } else {
        this.isLoginUser = true
      }
    }
  }
}
</script>

<style scoped>
.aside_blogger_mes {
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: 100%;
}
.aside_blogger_mes > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 5px;
}
.aside_blogger_mes_name {
  width: 100%;
}
.aside_blogger_mes_name > div {
  margin: 10px 0;
}
.aside_blogger_mes_name > div:first-child {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aside_blogger_mes_name > p {
  font-size: 12px;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
  -webkit-box-orient: vertical; /*设置伸缩盒子的子元素排列方式--从上到下垂直排列*/
  -webkit-line-clamp: 2; /*显示的行*/
}
</style>
